<template>
	<div class="page flex">
		<div class="tabFlex flex">
			<div class="item" @click="tab.index = index" v-for="(item, index) in tab.list" :class="tab.index === index ? 'active' : ''">{{ item.name }}</div>
			<div class="border" :style="{ left: `calc(${tab.index * 100 }px + ${tab.index * 10}px)` }"></div>
		</div>
		<template v-if="tab.index === 0">
			<div class="textareaView">
				<textarea
					class="textarea"
					:placeholder="'请输入提示词，例如：这是一首写给我的女友何燕燕，祝她28岁生日快乐\n每次会生成2首歌曲供您选择'"
				></textarea>
				<div class="countFlex flex">
					<div class="aiView flex">
						<div class="countView flex">
							<span class="has">0</span>
							<span class="all">/ 300</span>
						</div>
					</div>
					<div class="btn">粘贴</div>
					<div class="clear">清空</div>
				</div>
				<div class="load flex" v-if="false">
					<loading></loading>
				</div>
			</div>
			<div class="btnView">
				<div class="head flex">
					<img src="/img/lock_page.png" class="image" />
					<span class="text ell">生成音乐</span>
				</div>
				<div class="foot">还可试用1次</div>
			</div>
		</template>
		<template v-if="tab.index === 1">
			<div class="textareaView">
				<textarea
					class="textarea"
					:placeholder="'请直接输入歌词，歌词段落务必使用换行分割，建议使用AI帮您想歌词\n每次会生成2首歌曲供您选择'"
				></textarea>
				<div class="countFlex flex">
					<div class="aiView flex">
						<div class="left flex">
							<img src="/img/scholar_lord_entry.png" class="image" />
							<span class="text">AI想歌词</span>
						</div>
						<div class="countView flex">
							<span class="has">0</span>
							<span class="all">/ 300</span>
						</div>
					</div>
					<div class="btn">粘贴</div>
					<div class="clear">清空</div>
				</div>
				<div class="load flex" v-if="false">
					<loading></loading>
				</div>
			</div>
			<div class="otherView">
				<div class="smallH3 ell">风格选择</div>
				<div class="styleView flex">
					<div class="item flex active">
						<span class="text ell">随机</span>
					</div>
					<div class="item flex">
						<span class="text ell">流行音乐</span>
					</div>
					<div class="item flex">
						<span class="text ell">摇滚音乐</span>
					</div>
					<div class="item flex">
						<span class="text ell">民谣</span>
					</div>
					<div class="item flex">
						<span class="text ell">电子</span>
					</div>
					<div class="item flex">
						<span class="text ell">舞曲</span>
					</div>
				</div>
			</div>
			<div class="btnView">
				<div class="head flex">
					<img src="/img/lock_page.png" class="image" />
					<span class="text ell">生成音乐</span>
				</div>
				<div class="foot">还可试用1次</div>
			</div>
		</template>
	</div>
</template>

<script>
	export default {
		layout: 'index',
		head() {
			return {
				title: "开始创作 - AI音乐生成 | Suno AI音乐 | 专业生成音乐 创作平台",
				meta: [
					{
						name: 'description',
						content: 'AI音乐生成 - Suno AI音乐 | 专业生成音乐 创作平台'
					}
				]
			}
		},
		data() {
			return {
				
				// tab选项卡
				tab: {
					index: 0,
					list: [
						{ name: "简易模式" },
						{ name: "自定义模式" },
					]
				},
				
			}
		},
		asyncData({ app }) {
			
		},
		mounted(){
			
		},
	}
</script>

<style lang="scss" scoped>
	.page{
		flex-direction: column;
		width: 800px;
		max-width: 100%;
		margin: 0 auto;
		padding: 40px 25px;
		$background: #1a1d23;
		.tabFlex{
			margin-bottom: 25px;
			width: 400px;
			flex-direction: row;
			align-items: center;
			position: relative;
			.item{
				width: 100px;
				cursor: pointer;
				font-size: 16px;
				color: rgba(255,255,255,0.6);
				margin-right: 10px;
				text-align: center;
				line-height: 55px;
				transition: 0.2s all;
				&.active{
					font-size: 17px;
					color: #ebf8ff;
				}
			}
			.border{
				transition: 0.2s all;
				margin-left: 10px;
				width: 80px;
				height: 2px;
				border-radius: 10px;
				background: #ebf8ff;
				position: absolute;
				bottom: 0;
				left: 0;
			}
		}
		.textareaView{
			border-radius: 15px;
			padding: 20px;
			backdrop-filter: blur(15px);
			overflow: hidden;
			position: relative;
			background: $background;
			&:before {
			    content: '';
			    position: absolute;
			    z-index: -2;
			    left: 50%;
			    top: 50%;
			    width: 400%;
			    height: 400%;
				transform: translate(-50%, -50%);
			    background-color: rgba(255,255,255,0.02);
			    background-repeat: no-repeat;
			    background-position: 0 0;
			    background-image: conic-gradient(transparent, #01dddc, transparent 30%);
			    animation: rotate 4s linear infinite;
				@keyframes rotate {100% {transform: translate(-50%, -50%) rotate(1turn);}}
			}
			&:after {
			    content: '';
			    position: absolute;
			    z-index: -1;
			    left: 2px;
			    top: 2px;
			    width: calc(100% - 4px);
			    height: calc(100% - 4px);
			    background: $background;
			    border-radius: 15px;
			}
			.textarea{
				font-size: calc(15px * var(--fss));
				line-height: 1.55;
				color: #FFF;
				width: 100%;
				height: 15px * 1.55 * 10;
				overflow-y: auto;
				background: none;
				border: 0;
				resize: none;
				outline: none;
				&:hover {&::-webkit-scrollbar-track,&::-webkit-scrollbar-thumb {visibility: visible;}}
				&::-webkit-scrollbar {width: 3px;height: 3px;}
				&::-webkit-scrollbar-track,
				&::-webkit-scrollbar-thumb {border-radius: 999px;border: 0px solid transparent;visibility: hidden;}
				&::-webkit-scrollbar-track {box-shadow: 1px 1px 5px rgba(100, 100, 100, 0.2) inset;}
				&::-webkit-scrollbar-thumb {min-height: 0px;background-clip: content-box;box-shadow: 0 0 0 5px rgba(100, 100, 100, 0.5) inset;}
				&::-webkit-scrollbar-corner {background: transparent;}
			}
			.countFlex{
				flex-direction: row;
				align-items: center;
				justify-content: flex-end;
				padding: 0 2.5px 0 0;
				margin-top: 5px;
				.aiView{
					flex-direction: row;
					align-items: center;
					flex: 1;
					width: 0;
					margin-right: 15px;
					.left{
						padding: 6px 14px 6px 12px;
						border-radius: 6px;
						background: rgba(255,255,255,0.05);
						flex-direction: row;
						align-items: center;
						transition: 0.2s all;
						margin-right: 20px;
						cursor: pointer;
						&:hover{
							background: rgba(255,255,255,0.03);
						}
						.image{
							width: 25px;
							height: 25px;
						}
						.text{
							margin-left: 8px;
							font-weight: bold;
							color: #FFF;
							font-size: 15px;
						}
					}
					.countView{
						flex-direction: row;
						align-items: center;
						flex: 1;
						width: 0;
						.has{
							font-size: 15px;
							font-weight: bold;
							color: #FFF;
						}
						.all{
							font-size: 15px;
							margin-left: 5px;
							color: rgba(255,255,255,0.5);
						}
					}
				}
				.btn{
					margin-left: 12.5px;
					font-size: 15px;
					color: rgba(255,255,255,0.8);
					transition: 0.2s all;
					cursor: pointer;
					&:active{
						opacity: 0.8;
					}
				}
				.clear{
					margin-left: 20px;
					font-size: 15px;
					color: rgba(255,255,255,0.8);
					transition: 0.2s all;
					cursor: pointer;
					&:active{
						opacity: 0.8;
					}
				}
			}
			.load{
				position: absolute;
				left: 2px;
				top: 2px;
				right: 2px;
				bottom: 2px;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				background: $background;
				border-radius: 10px;
			}
		}
		.btnView{
			transition: 0.2s all;
			width: 100%;
			margin: 40px auto 0 auto;
			border-radius: 100px;
			position: relative;
			overflow: hidden;
			cursor: pointer;
			transition: 0.2s all;
			&:hover{
				opacity: 0.8;
			}
			&:active{
				opacity: 0.9;
			}
			.head{
				width: 100%;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				height: 53px;
				background: #01dddc;
				.image{
					width: 24px;
					height: 24px;
					margin-right: 10px;
				}
				.text{
					color: #000;
					font-size:  17px;
					font-weight: bold;
				}
			}
			.foot{
				font-size: 13px;
				background: #1fb7b6;
				color: rgba(255,255,255,1);
				text-align: center;
				line-height: 1.4;
				position: absolute;
				right: 0;
				top: 0;
				padding: 0 12px 0 12px;
				border-radius: 0 0 0 15px;
			}
			&:after{
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: linear-gradient(100deg, rgba(0,0,0,0) 40%, rgba(83,137,106,0.08) 50%, rgba(0,0,0,0) 60%);
				background-size: 200% 100%;
				background-position-x: 120%;
				animation: skeleton 1.5s ease-in-out infinite;
				@keyframes skeleton {
					to{
						background-position-x: -20%;
					}
				}
			}
		}
		.otherView{
			margin-top: 30px;
			.smallH3{
				line-height: 35px;
				font-size: 15px;
				color: rgba(255,255,255,0.85);
				font-weight: bold;
			}
			.styleView{
				flex-direction: row;
				flex-wrap: wrap;
				margin-top: 10px;
				.item{
					flex-direction: row;
					align-items: center;
					justify-content: center;
					margin-right: 12px;
					margin-bottom: 12px;
					width: calc((100% - 12px * 3) / 4);
					background: $background;
					padding: 8px;
					border-radius: 10px;
					border: 1px solid rgba(255,255,255,0);
					position: relative;
					overflow: hidden;
					transition: 0.2s all;
					cursor: pointer;
					&:hover{
						opacity: 0.8;
					}
					&:nth-child(4n){
						margin-right: 0;
					}
					.text{
						font-size: 15px;
						color: rgba(255,255,255,0.6);
						position: relative;
						z-index: 2;
					}
					&.active{
						background: #31363f;
						.text{
							font-weight: bold;
							color: #ebf8ff;
						}
					}
				}
			}
		}
	}
</style>